<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>便民服务平台3.0</title>
    <link rel="stylesheet" href="<c:url value='/resource/css/bootstrap.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/darktooltip.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/animate.min.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/style.css'/>">


</head>

<body>
<jsp:include page="../include/header.jsp"></jsp:include>
<script src="<c:url value='/resource/js/lib/template.js'/>"></script>
<script src="<c:url value='/resource/js/lib/jqPaginator.js?v2.1'/>"></script>
<style type="text/css">
    .td_middle {
        vertical-align: middle !important;
    }
</style>

<div class="main-container">
    <div class="mc-hd">
        <p class="app-t">queryCenter</p>
        <h1 class="app-h1">专注高端”互联网+政务”设计</h1>
        <div class="type-wrap">
            <h2 class="typedH2">慧眼看世界，在政务服务的路上不断追求创新！</h2>
        </div>
    </div>
    <div class="mc-bd">

        <div class="container">

            <ol class="breadcrumb">
                <li><a href="<c:url value="/interacts"></c:url>">应用中心</a></li>
                <li class="active">失物招领</li>
            </ol>
            <div class="row">
                <div class="col-sm-12">
                    <div class="mccc-right">
                        <h2>失物招领列表</h2>
                        <div class="panel panel-default">
                            <div class="panel-body pa-search">
                                <div class="form-inline" role="form">
                                    <div class="form-group">
                                        <label>物品名称：</label>
                                        <input type="text" class="form-control" id="txtLostName" style="width: 294px;">
                                    </div>
                                    <div class="form-group" style="margin-left: 40px;">
                                        <label>发布单位：</label>
                                        <input type="text" class="form-control" id="txtOrgName" style="width: 294px;">
                                    </div>
                                </div>
                                <div class="form-inline" role="form">
                                    <div class="form-group">
                                        <label>失物性质：</label>
                                        <select class="form-control" style="width: 294px;" id="selInfoType">
                                            <option value="">请选择</option>
                                            <option value="1">丢失</option>
                                            <option value="2">捡拾</option>
                                        </select>
                                    </div>
                                    <div class="form-group" style="margin-left: 40px;">
                                        <label>发布时间：</label>
                                        <input type="text" class="form-control laydate-icon" id="txtStartTime"
                                               style="width: 136px;cursor: pointer" readonly="readonly"> 至
                                        <input type="text" class="form-control laydate-icon" id="txtEndTime"
                                               style="width: 136px;cursor: pointer" readonly="readonly">
                                    </div>
                                    <div class="form-group">
                                        <button type="button" class="btn btn-blue" onclick="query();">查询</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th class="text-center">序号</th>
                                <th class="text-center">照片</th>
                                <th>事发地点</th>
                                <th>物品名称</th>
                                <th>发布单位</th>
                                <th class="text-center">发布日期</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody id="mytask_clz_dv">
                            </tbody>
                        </table>
                        <div class="text-center">
                            <ul class="pagination " id="pagination2"></ul>
                        </div>
                        <!-- 列表模板 start -->
                        <script id="mytask_clz_dv_attid" type="text/html">
                            {{if list.length < 1}}
                            <tr>
                                <td colspan="7">[暂未找到您的数据]</td>
                            </tr>
                            {{/if}}
                            {{each list as value i}}
                            <tr>
                                <td class="text-center td_middle">{{(pageIndex - 1) * pageSize + (i+1)}}</td>
                                <td class="text-center td_middle"><img src="data:image/png;base64,{{value.thumbImg}}"
                                                                       style="width:120px;height:100px"></td>
                                <td class="td_middle">{{value.lostaddress}}</td>
                                <td class="td_middle">{{value.lostname}}</td>
                                <td class="td_middle">{{value.orgname}}</td>
                                <td class="text-center td_middle">{{value.crttime | dateFormat: 'yyyy-MM-dd'}}</td>
                                <td class="text-center td_middle"><a href="javascript:;"
                                                                     onclick="loadDetail('{{value.guid}}');">详情</a></td>
                            </tr>
                            {{/each}}
                        </script>
                        <!-- 列表模板 end -->
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<!-- 弹出层 start -->
<div class="modal fade" id="myModal-lost">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">失物详情</h4>
            </div>
            <div class="modal-body" id="modal-body-container">
                <script id="lostproperty_template_detail" type="text/html">

                    <table class="table table-bordered">
                        <colgroup>
                            <col width="15%">
                            <col width="50%">
                            <col width="35%">
                        </colgroup>
                        <tr>
                            <th>性质：</th>
                            <td> {{if infotype == '1'}}丢失{{else}}捡拾{{/if}}</td>
                            <th>照片</th>
                        </tr>
                        <tr>
                            <th>物品名称：</th>
                            <td>{{lostname}}</td>
                            <td rowspan="8"><img src="data:image/png;base64,{{sourceImg}}"
                                                 style="width:265px;height:275px"></td>
                        </tr>
                        <tr>
                            <th>物品类别：</th>
                            <td>
                                {{if losttype == '1'}}
                                证件
                                {{else if losttype == '2'}}
                                包袋
                                {{else if losttype == '3'}}
                                电子产品
                                {{else}}
                                其他
                                {{/if}}
                            </td>
                        </tr>
                        <tr>
                            <th>事发地点：</th>
                            <td>{{lostaddress}}</td>
                        </tr>
                        <tr>
                            <th>事发时间：</th>
                            <td>{{losttime | dateFormat: 'yyyy-MM-dd'}}</td>
                        </tr>
                        <tr>
                            <th>内容描述：</th>
                            <td>{{remark}}</td>
                        </tr>
                        <tr>
                            <th>发布单位：</th>
                            <td>{{orgname}}</td>
                        </tr>
                        <tr>
                            <th>发布日期：</th>
                            <td>{{crttime | dateFormat: 'yyyy-MM-dd'}}</td>
                        </tr>
                        <tr>
                            <th>联系电话：</th>
                            <td>{{temp1}}</td>
                        </tr>
                    </table>

                </script>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 弹出层 end -->
<jsp:include page="../include/footer.jsp"/>
<script src="<c:url value='/resource/js/require.js'/>" data-main="<c:url value='/resource/js/main.js'/>"
        id="current-page" current-page="appCenter"></script>

<script src="<c:url value='/resource/js/app/laydate/laydate.js'/>"></script>
<script type="text/javascript">

    //    var start = {
    //        elem: '#txtStartTime',
    //        format: 'YYYY/MM/DD',
    //        min: laydate.now(), //设定最小日期为当前日期
    //        max: '2099-06-16 23:59:59', //最大日期
    //        istime: true,
    //        istoday: false,
    //        choose: function(datas){
    //            end.min = datas; //开始日选好后，重置结束日的最小日期
    //            end.start = datas //将结束日的初始值设定为开始日
    //        }
    //    };
    //    var end = {
    //        elem: '#txtEndTime',
    //        format: 'YYYY/MM/DD',
    //        min: laydate.now(),
    //        max: '2099-06-16 23:59:59',
    //        istime: true,
    //        istoday: false,
    //        choose: function(datas){
    //            start.max = datas; //结束日选好后，重置开始日的最大日期
    //        }
    //    };
    //    laydate(start);
    //    laydate(end);
    //日期控件
    var start = {
        elem: '#txtStartTime',
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#txtEndTime',
        choose: function (datas) {
            //start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };

    $("#txtStartTime").click(function () {
        laydate(start);
    });
    $("#txtEndTime").click(function () {
        laydate(end);
    });

    $(document).ready(function () {
        //延迟100毫秒加载，以确保jqPaginator加载完成
        setTimeout(query, 500);
    });

    //查询
    function query() {
        console.log($('#txtLostName').val());
        var searchJson = {
            ps: 20,
            pi: 1,
            lostname: $('#txtLostName').val(),
            orgname: $('#txtOrgName').val(),
            starttime: $('#txtStartTime').val(),
            endtime: $('#txtEndTime').val(),
            infotype: $('#selInfoType option:selected').val()
        };
        new Paging({
            type: 'GET',
            data: searchJson,
            url: '<c:url value="/interacts/lostproperty/page"></c:url>',
            tempId: "mytask_clz_dv_attid",
            paginger: "pagination2",
            containerId: "mytask_clz_dv",
            errorCallback: function (data) {
                console.log(data);
            }
        }).getPagList();
    }

    var Paging = function (option) {
        var myoption = option || {};

        this.getPagList = function () {
            var myurl = myoption.url;
            $.ajax({
                type: myoption.type,
                url: myurl,
                data: myoption.data,
                dataType: "json",
                success: function (resp) {
                    resp = eval(resp);
                    console.log(resp);
                    var shtml = template(myoption.tempId, resp.data);

                    $("#" + myoption.containerId).html(shtml);
                    paginator(resp.data);
                },
                error: function (resp) {

                    if (typeof (option.errorCallback) == "function") {
                        option.errorCallback(resp);
                    }
                }
            });
        }

        //设置分页条数据（私有方法）
        function paginator(resdata) {

            var _trow = resdata.totalRow == 0 ? 1 : resdata.totalRow;

            $.jqPaginator('#' + myoption.paginger, {
                totalCounts: _trow,
                pageSize: resdata.pageSize,
                visiblePages: 10,
                currentPage: resdata.pageIndex,
                first: '<li class="first"><a href="javascript:;">首页</a></li>',
                prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
                next: '<li class="next"><a href="javascript:;">下一页</a></li>',
                last: '<li class="last"><a href="javascript:;">尾页</a></li>',
//                selectpage: '{{page}}',
                page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                onPageChange: function (num, type) {
                    if (type == "change") {
                        var custom = option;
                        // console.log(custom);
                        custom.data.pi = num;

                        new Paging(custom).getPagList();
                    }
                }
            });
        }
    }


    function loadDetail(id) {

        $.ajax({
            type: 'get',
            url: "<c:url value="/interacts/lostproperty/"></c:url>" + id,
            success: function (resp) {
                console.log(resp);
                resp = eval(resp);
                template.config("escape", false);
                var shtml = template("lostproperty_template_detail", resp.data);
                //console.log(shtml);
                $("#modal-body-container").html(shtml);
                $('#myModal-lost').modal();
            },
            error: function (resp) {

                if (typeof (option.errorCallback) == "function") {
                    option.errorCallback(resp);
                }
            }
        });


    }
</script>
</body>
</html>
